<template>
	<view>
		<!-- 1页时：加载中 -->
		<view v-if="status==='loading' && !isBottom && !listdata.length" style="margin-top:20rpx;"><u-loading-icon text="加载中" size="18"
				textSize="14"></u-loading-icon></view>
		
		<!-- 大于6条时，加载更多组件 -->
		<view v-if="isBottom && this.listdata.length >= config.showMorePageSize && loadMore"><u-loadmore :line="true" :status="status" :loadingText="loadingText"
				:loadmoreText="loadmoreText" :nomoreText="nomoreText" /></view>
				
		<!-- 1页时：列表为空，默认效果 -->
		<view v-if="status!=='loading' && !listdata.length && !isBottom">
			<slot v-if="defindNull"></slot>
			<u-loadmore v-else marginTop="100" :line="true" status="nomore" :loadingText="loadingText"
				:loadmoreText="loadingText" nomoreText="暂无数据" />
		</view>
		<!-- 页面自定义空效果 -->
	</view>
</template>


<script>
	import config from '@/common/static/data-config'
	/**
	 * 加载中，空及底部加载 组件：
	 * 
	 * 小于1页时：不用u-loadmore组件
	 * loading：用自定的
	 * 空时效果：也用自定义的，设计给的话用设计稿上的，没给，可以写成 暂无数据（上间距100px）
	 * 
	 * 只有大于1页且滚动到底部时用u-loadmore组件
	 * 
	 * isBottom页面是否滚动到底部 
	 */
	export default {
		name: "listLoading",
		// props: ['status', 'defindNull', 'hidden'],
		props: {
			status: {
				type: String,
				default: 'loading'
			},
			defindNull: {
				type: Boolean,
				default: false
			},
			loadMore: {
				type: Boolean,
				default: true
			},
			listdata: {
				type: Array,
				default: function() {
					return []
				}
			},
			isBottom:{
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				// status: 'loading',
				loadingText: '正在加载...',
				// 自动加载，目前此状态用不到，需要把文案改成 正在加载...
				loadmoreText: '加载更多...',
				nomoreText: '已全部加载完毕',
				config:config,
			};
		},
		// computed: {
		// 	isShowBottomLoading: function() {
		// 		let isShow = false;
		// 		if (this.isBottom && this.listdata.length >= 40) {
		// 			isShow = true;
		// 		}
		// 		return isShow;
		// 	},
		// },
	}
</script>

<style>

</style>